<template>

  <el-dialog :visible.sync='visible' :title="type === 'insert' ? '新增生僻字' : '修改生僻字'" width='600px'
             @closed='closeDialog'>
    <el-row>
      <el-col :span='7'>
        <span class='label'>生僻字图片<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-upload
          class="avatar-uploader"
          :action="CONST.SERVICE_REST_PACKAGE + 'UncommonWordCtrl/uploadUncommonWord'"
          :show-file-list="false"
          :on-success="onSuccess"
          :before-upload="beforeUpload">
          <img v-if="uncommonWord.path" :src="uncommonWord.path" class="avatar"
               style="height: 25px; " title="点击更换图片"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>读音<em style='color: red'>*</em></span>
      </el-col>
      <el-col :span='17'>
        <el-input v-model="uncommonWord.spellCode"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>形似字</span>
      </el-col>
      <el-col :span='17'>
        <el-input v-model="uncommonWord.similarWord"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>编码</span>
      </el-col>
      <el-col :span='17'>
        <el-input v-model="uncommonWord.code"/>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span='7'>
        <span class='label'>备注</span>
      </el-col>
      <el-col :span='17'>
        <el-input v-model="uncommonWord.remark"/>
      </el-col>
    </el-row>

    <div class="dialog-footer" slot="footer">
      <el-button @click='closeDialog'>取 消</el-button>
      <el-button @click="submit" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'InsertUncommonWordDialog',
  props: ['uncommonWordList'],
  data() {
    return {
      type: '',
      visible: false,
      uncommonWord: {
        id: UTIL.generateSfId(),
        spellCode: '',
        content: '',
        contentType: '',
        similarWord: '',
        remark: '',
        path: '',
        code: '',
      }
    }
  },
  methods: {
    onSuccess(res, file) {
      this.uncommonWord.path = res.path;
      this.uncommonWord.contentType = UTIL.getFileType(file.name);
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024  < 20
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20KB!')
        return false
      }
      return UTIL.beforeUpload(file)
    },
    submit() {
      // 校验;
      if (UTIL.isEmpty(this.uncommonWord.path)) {
        this.$message.warning("生僻字图片不能为空")
        return
      }
      if (UTIL.isEmpty(this.uncommonWord.spellCode)) {
        this.$message.warning("读音不能为空")
        return
      }
      // 校验code唯一;
      if (this.uncommonWordList.find(item => item.id !== this.uncommonWord.id && item.code === this.uncommonWord.code)) {
        this.$message.warning("编码与现有生僻字重复")
        return
      }
      this.axios.post(CONST.SERVICE_REST_PACKAGE + 'UncommonWordCtrl/saveUncommonWord',
        this.uncommonWord)
        .then(() => {
          this.$emit('saveUncommonWord')
        })
      this.closeDialog()
    },
    closeDialog(){
      this.visible = false;
      this.uncommonWord.id = UTIL.generateSfId()
      this.uncommonWord.spellCode = ''
      this.uncommonWord.content = ''
      this.uncommonWord.contentType = ''
      this.uncommonWord.similarWord = ''
      this.uncommonWord.remark = ''
      this.uncommonWord.path = ''
      this.uncommonWord.code = ''
    },
  }
}
</script>

<style scoped>
.el-row {
  line-height: 50px;
}

.el-col {
  display: inline-block;
}

/deep/ .el-dialog__body {
  padding: 0px 20px;
}
</style>
